<template>
	<el-card shadow="hover">
		<template #header>
			<div class="row y_center" style="gap: 4px;">
				<el-icon>
					<Connection />
				</el-icon>
				<span>角色组</span>
				<div class="tool" style="margin-left: auto;">
					<el-button type="primary" link icon="Plus" @click="editGroup(null)">添加角色组</el-button>
				</div>
			</div>
		</template>
		<div>
			<div class="list column" style="gap: 10px;" v-loading="listLoading">
				<div v-for="(item, index) in groupList" :key="index" class="row item y_center" style="gap: 4px;">
					<el-text>{{ item.name }}</el-text>
					<div style="margin-left: 6px;">
						<el-tag type="primary" size="small" v-if="item.status">启用</el-tag>
						<el-tag type="warning" size="small" v-else>已禁用</el-tag>
					</div>
					<div class="row y_center click" style="margin-left: auto;">
						<el-icon color="#3B82F6" size="12" @click="editGroup(item)">
							<Edit />
						</el-icon>
						<el-divider direction="vertical" style="margin-right: 2px;" />
						<el-popconfirm class="box-item" title="删除后不可恢复,确认删除吗?" placement="bottom"
							@confirm="delGroup(item)">
							<template #reference>
								<el-button link type="danger" icon="Delete" size="small"
									:loading="delLoading[`_${item.id}`]"></el-button>
							</template>
						</el-popconfirm>
					</div>
				</div>
				<div class="row item xy_center click"
					style="border: 1px dashed var(--el-color-info-light-7); justify-content: center;gap: 6px;background-color: unset;"
					@click="editGroup(null)">
					<el-icon color="#374151" size="10">
						<Plus />
					</el-icon>
					<el-text style="text-align: center;">添加</el-text>
				</div>
			</div>
		</div>
	</el-card>
	<groupEditTem ref="groupEditTem" @editSuccess="getGroupList()"></groupEditTem>
</template>

<script>
import { useAccountStore } from '../../../../stores/account'
import groupEditTem from './groupEdit.vue'
import { ElMessage } from 'element-plus'
export default {
	components: { groupEditTem },
	data() {
		return {
			listLoading: false,
			delLoading: {},
			groupList: []
		}
	},
	computed: {
		accountStore() {
			return useAccountStore()
		}
	},
	created() {
		this.getGroupList()
	},
	methods: {
		delGroup(row) {
			this.delLoading[`_${row.id}`] = true
			this.accountStore.deleteAccountGroup(row.id).then(res => {
				if (res.code !== 200) {
					throw new Error(res.message);
				}
				this.getGroupList()
				ElMessage.success(res.message)
			}).catch(err => {
				ElMessage.error(err.message)
			}).finally(() => {
				this.delLoading[`_${row.id}`] = false
			})
		},
		editGroup(itemInfo = null) {
			if (itemInfo) {
				this.$refs.groupEditTem.itemInfo = JSON.parse(JSON.stringify(itemInfo))
			}
			this.$refs.groupEditTem.show = true
		},
		getGroupList() {
			this.listLoading = true
			this.accountStore.getGroupList().then(res => {
				if (res.code !== 200) {
					throw new Error(res.message);
				}
				this.groupList = res.data.list
			}).catch(err => {
				ElMessage.error('角色组加载失败,' + err.message)
			}).finally(() => {
				this.listLoading = false
			})
		}
	}
}
</script>

<style scoped lang="less">
.list {
	.item {
		background-color: #fbfbfb;
		border: 1px solid #eceef5;
		border-radius: 4px;
		padding: 8px 13px;
	}

	.item:hover {
		background-color: #eff2f9 !important;
	}
}
</style>